/*

INFORMATION

name: CSS template
version: 1.1.1
uploaded: Sep 25 2025
coder: @pod

Feel free to DM me for coding help
    - pod

*/

:root {
    --content: #5c444075;
    --sidenav: #5c4440dd;
    --topnav: #5c4440dd;
    
    --hr: rgba(119,119,119,0.5);
    --border-width: 2px;
    --text: #2b2b2a;
    --radius: .25rem;
    
    --primary: #f69d27;
    --secondary: #227A6F;
    --success: #9ec711;
    --warning: #ffb03d;
    --danger:#F6B26B;
    --info: #b6c5d8;
    --faded: #333;
    --muted: #575656;
    --light: #f4f2ce;
    --dark: #3d3c3c;
    
    /* default button colour */
    --bg1: #823b3b;
    
    /* default badge colour */
    --bg2: #555;
    
    /* keep this colour similar to the primary colour, only less opaque */
    --color1: rgba(13,191,170,0.5);
    
    /* same with this, even more opaque */
    --color2: rgba(161,137,84,0.25);
    
    --font-size: 14px;
    --font-family: Trebuchet MS,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* toyhou.se default */
    
    --scale: 1.16;
    --h1: calc(var(--h2) * var(--scale));
    --h2: calc(var(--h3) * var(--scale));
    --h3: calc(var(--h4) * var(--scale));
    --h4: calc(var(--h5) * var(--scale));
    --h5: calc(var(--h6) * var(--scale));
    --h6: calc(var(--font-size) * var(--scale) * 1.05);
}





/* font and scaling */

body {
    font-size: var(--font-size);
    font-family: var(--font-family);
    background-image: url(https://64.media.tumblr.com/e674bb1418e01f2a44cf13f7ccbc6c21/0792d67b7e437511-2f/s2048x3072/21085fd675c57ac0318e385dd73f99ce0f7095d2.jpg);
    background-repeat:no-repeat;
    background-attachment: fixed;
    
}

header {
    font-size: 72px;
}

h1 {
    font-size: var(--h1);
    font-family:book antiqua ;
    color:#FFE599;
    font-weight:800;
    letter-spacing:1px;
    border-top: 10px solid;
    border-bottom:10px solid;
    background-color: var(--danger);
    padding-left:10px;
    text-align:center;
    font-variant:small-caps;
}

h2 {
    font-size: var(--h2);
    font-family: Courier New ;
    color:var(--light);
    font-weight:800;
    letter-spacing:1px;
    border-top: 5px solid;
    border-bottom:5px solid;
    background-color: var(--danger);
    padding-left:10px;
    text-align:center;
}
h3 {
    font-size: var(--h3);
    font-family: Georgia;
    font-weight:600;
    color:var(--warning)
    border-bottom:2px solid;
    letter-spacing:-1px;
}

h4 {
    font-size: var(--h4);
    font-family: Trebuchet MS;
    font-weight:800;
    color:var(--danger);
    letter-spacing:-1px;
}

h5 {
    font-size: var(--h5);
    font-family: Trebuchet MS;
    font-weight:600;
    color:var(--textcolor);
    letter-spacing:-1px;
    margin-bottom:5px;
}
h6 {
    font-size: var(--h6);
    font-family: Courier New ;
    color:var(--textcolor);
    font-weight:800;
    letter-spacing:1px;
}

.column2 {
  float: left;
  width: 50%;
}

.column4 {
  float: left;
  width: 25%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


blockquote {
  display: block;
  color:var(--accent);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 40px;
  margin-right: 40px;
}

/* catch-all stuff for anything I missed */

* {
    border-color: var(--border) !important;
    border-width: var(--border-width) !important;
}





/*

    BOOTSTRAP
    BOOTSTRAP
    BOOTSTRAP
    BOOTSTRAP

*/





/*

PRIMARY
- link text is also included

*/

.text-primary, a {
    color: var(--primary) !important;
}

a:hover {
    opacity: .75 !important;
}

.btn-primary, .bg-primary, .nav-pills .nav-link.active, .badge-primary, .alert-primary {
    background-color: var(--primary) !important;
    color: var(--light) !important;
    border-color: var(--border) !important;
}

.jumbotron, .progress {
  background-color: var(--bg2);
}

.progress-bar {
    background-color: var(--primary);
}

.btn-outline-primary {
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
  color: var(--light) !important;
  background-color: var(--primary);
  border-color: var(--primary) !important;
}

.page-item.active .page-link {
    background-color: var(--primary) !important;
    color: var(--light);
}



/*

SECONDARY

*/

.text-secondary {
    color: var(--secondary) !important;
}

.btn-secondary, .bg-secondary, .badge-secondary, .alert-secondary {
    background-color: var(--secondary) !important;
    color: var(--light) !important;
}

.btn-outline-secondary {
    border-color: var(--secondary) !important;
}

.btn-outline-secondary:hover {
  color: var(--light) !important;
  background-color: var(--secondary);
  border-color: var(--secondary) !important;
}





/*

SUCCESS

*/

.text-success {
    color: var(--success) !important;
}

.btn-success, .bg-success, .badge-success, .alert-success {
    background-color: var(--success) !important;
    color: var(--light) !important;
}

.btn-outline-success {
    border-color: var(--success) !important;
}

.btn-outline-success:hover {
  color: var(--light) !important;
  background-color: var(--success);
  border-color: var(--success) !important;
}





/*

WARNING

*/

.text-warning {
    color: var(--warning) !important;
}

.btn-warning, .bg-warning, .badge-warning, .alert-warning {
    background-color: var(--warning) !important;
    color: var(--light) !important;
}

.btn-outline-warning {
    border-color: var(--warning) !important;
}

.btn-outline-warning:hover {
  color: var(--light) !important;
  background-color: var(--warning);
  border-color: var(--warning) !important;
}





/*

DANGER

*/

.text-danger {
    color: var(--danger) !important;
}

.btn-danger, .bg-danger, .badge-danger, .alert-danger {
    background-color: var(--danger) !important;
    color: var(--light) !important;
}

.btn-outline-danger {
    border-color: var(--danger) !important;
}

.btn-outline-danger:hover {
  color: var(--light) !important;
  background-color: var(--danger);
  border-color: var(--danger) !important;
}





/*

INFO

*/

.text-info {
    color: var(--info) !important;
}

.btn-info, .bg-info, .badge-info, .alert-info {
    background-color: var(--info) !important;
    color: var(--light) !important;
}

.btn-outline-info {
    border-color: var(--info) !important;
}

.btn-outline-info:hover {
  color: var(--light) !important;
  background-color: var(--info);
  border-color: var(--info) !important;
}





/*

FADED

*/

.btn-faded, .bg-faded, .badge-faded, .alert-faded {
    background-color: var(--faded) !important;
}

.btn-outline-faded {
    border-color: var(--faded);
}

.btn-outline-faded:hover {
  background-color: var(--faded);
  border-color: var(--faded) !important;
}





/*

LIGHT

*/

.btn-light, .bg-light, .badge-light, .alert-light {
    background-color: var(--light) !important;
}

.btn-outline-light {
    border-color: var(--light);
}

.btn-outline-light:hover {
  background-color: var(--light);
  border-color: var(--light) !important;
}





/*

DARK

*/

.btn-dark, .bg-dark, .badge-dark, .alert-dark {
    background-color: var(--dark) !important;
}

.btn-outline-dark {
    border-color: var(--dark) !important;
}

.btn-outline-dark:hover {
  background-color: var(--dark);
  border-color: var(--dark) !important;
}




/*

MISC + FIXES

*/

.group-profile .profile-name-section {
align-items: center;
display: none;
flex-wrap: wrap;
}

.card, .card-block, .modal-content {
    border-color: var(--border) !important;
    background-color: var(--faded);
    border-radius: var(--radius) !important;
    border-radius: .25rem;
}

.profile-tags-content, .literature-header-subinfo {
  border-color: var(--border) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.sidebar-divider-collections, .sidebar-divider-username {
    margin-top: 0 !important;
}

.nav-link {
    border-color: transparent !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--content);
  border-color: var(--hr) var(--hr) transparent !important;
}

.nav-tabs {
    border-color: var(--hr);
}

.nav-tabs .nav-link {
    margin-bottom: calc(0px - var(--border-width)) !important;
}

.nav-tabs .nav-link:not(.active):hover {
    border-color: transparent !important;
}

.btn-default {
    background-color: var(--bg1) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.btn-default:hover {
    border-color: transparent !important;
}

.badge-default {
    background-color: var(--bg2);
}

.comment .comment-replies, .forum-post .comment-replies {
  border-color: var(--hr) !important;
}

.thumb-character-stat {
  color: var(--muted);
}

.thumb-character-stat.favorited, .thumb-character-stat.favorited:hover {
  color: var(--warning);
}

.thumb-character-stat:hover {
  color: var(--muted);
}

.link-panel::before {
  border-color: var(--faded);
}

.fr-spoiler {
    border-color: var(--border) !important;
}

.fr-spoiler:not(.fr-command)::before {
  background-color: var(--faded);
  opacity: .75;
}

.fr-spoiler:not(.fr-command):hover::before {
  background-color: var(--faded);
  opacity: 1;
}

.characters-filters *, .btn {
    border-color: var(--border) !important;
}

.comment .forum-post-post .forum-post-footer .forum-post-time, .forum-post .forum-post-post .forum-post-footer .forum-post-time {
  color: var(--muted);
}

.custom-control-indicator {
  background-color: var(--primary) !important;
  opacity: .5;
}

.custom-control-input:checked ~ .custom-control-indicator {
  color: var(--content) !important;
  background-color: var(--primary) !important;
  opacity: 1;
}

.alert-success, .alert-danger, .alert-warning, .alert-info {
    border-color: var(--border) !important;
}

/* IC selection */

#user-character-selector .user-character-selector-left .user-character-selector-header .user-character-selector-title, #user-character-selector .user-character-selector-left.user-character-selector-header .user-character-selector-title {
  color: var(--text);
}

#user-character-selector * {
  border-color: var(--border) !important;
}

#user-character-selector .user-character-selector-right, .pagination .page-jumper, #user-character-selector .user-character-selector-body, #user-character-selector .user-character-selector-sidebar, #user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list > .list-group-item {
  background-color: var(--faded);
}

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list > .list-group-item {
    background: none !important;
    border-top: none;
}

#user-character-selector .user-character-selector-sidebar {
    background: var(--bg1);
}

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list > .list-group-item.active > a {
  background-color: var(--faded);
}

/* --- */

.btn.focus, .btn:focus {
  box-shadow: 0 0 0 2px var(--color2) !important;
}

.gallery-thumb .thumb-image > a:hover {
  box-shadow: 0 0 3px var(--color2) !important;
}

.dropdown-item.hover, .dropdown-item:hover {
  color: var(--light) !important;
  background-color: var(--color2) !important;
}

.dropdown-item.active, .dropdown-item:active {
  color: var(--light) !important;
  background-color: var(--color1) !important;
}

#sidebar a:hover {
  background-color: var(--color2);
}

.side-nav li.active > a, .side-nav li.active > a:focus, .side-nav li.active > a:hover, .side-nav li.active > a:link {
  background-color: var(--color2);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--content);
}

body * {
    ::-webkit-scrollbar-track {
      background: transparent;
    }
}

::-webkit-scrollbar-thumb {
  background: var(--color1);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.subheader a:hover {
    background: none !important;
}

.btn-outline-secondary {
    color: var(--text) !important;
}

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus {
    border: none !important;
    border-color: transparent; !important
}

.navbar-toggler-icon, .navbar-toggler-icon:active, .navbar-toggler-icon:focus {
    color: var(--primary) !important;
    visibility: hidden !important;
    border: none !important;
    border-color: transparent; !important
}

.navbar-toggler-icon::before {
    content: "";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-size: 24pt;
    font-weight: 300;
    visibility: visible !important;
}

code {
    background-color: var(--faded) !important;
    color: var(--primary) !important;
}

.pagination, .characters-gallery-pagination {
    overflow-x: auto !important;
    max-width: 100% !important;
}

@media (max-width: 1081px) {
    .pagination-wrapper .pagination {
        justify-content: start !important;
        overflow: hidden;
        max-width: 100% !important;
    }
}

.card, .card-block, .rounded,
.btn-primary, .badge-primary, .btn-outline-primary,
.btn-secondary, .badge-secondary, .btn-outline-secondary,
.btn-default, .badge-default,
.btn-success, .badge-success, .btn-outline-success,
.btn-danger, .badge-danger, .btn-outline-danger,
.btn-warning, .badge-warning, .btn-outline-warning,
.btn-info, .badge-info, .btn-outline-info, .progress, .nav-pills .nav-link, .img-thumbnail, .mfp-figure, .btn-default, .card, .card-block, .modal-content, .mfp-figure {
    border-radius: var(--radius) !important;
}

.img-thumbnail img, .characters-folder img, .display-character img {
    border-radius: calc(var(--radius) - .25rem) !important;
}

.nav-tabs .nav-link {
    border-radius: var(--radius) var(--radius) 0 0;
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}



/*

    STRUCTURE
    STRUCTURE
    STRUCTURE
    STRUCTURE

*/





body {
    color: var(--text);
}

#sidebar {
    background-color: var(--sidenav);
}

#content {
    background-color: var(--content);
}

#header, #footer {
    background-color: var(--topnav);
    background-image: none;
}





/*

    HEADER
    FOOTER
    HEADER
    FOOTER

*/





#header {
    /* [!] structural element */
    /* the header at the top of the page */
}

#footer {
    /* [!] structural element */
    /* the footer at the bottom of the page */
    /* for some reason not visible in Circlejourney's live editor */
}

#header .display-user-avatar {
    /* header profile picture */
}

#header .display-user-username {
    /* header username */
}

.dropdown-menu {
    /* the dropdown menus of the header */
}

.navbar-brand {
    /* "TOYHOU.SE" title at the top-left of the page */
}

#header a {
    /* header links */
}





/*

    SIDEBAR
    SIDEBAR
    SIDEBAR
    SIDEBAR

*/





.side-nav .header {
    background-color: var(--primary) !important;
    color: var(--light) !important;
}
.side-nav .subheader {
    background-color: var(--color1) !important;
}

.side-nav .subheader a {
    color: var(--light) !important;
}





.side-nav li.blurb {
  padding: 0 .75em;
  font-size: .8rem;
}





#sidebar {
    /* [!] structural element */
    /* the container containing .side-nav */
    /* if you want to change the width of the sidebar, change this element and not .side-nav */
}

.side-nav {
    /* the container containing all the sidebar items like pfp, headers, links, etc. */
}

#sidebar .display-user-avatar {
    /* sidebar profile picture */
}

#sidebar .display-user-username {
    /* sidebar username */
}

.side-nav li a {
    /* sidebar links */
}

.side-nav li.divider {
    /* sidebar divider */
}

.side-nav .header {
    /* sidebar header */
}

.side-nav .subheader {
    /* sidebar subheader aka folder */
}

.side-nav .blurb {
    /* blurb */
}





/*

    CONTENT
    CONTENT
    CONTENT
    CONTENT

*/





.mfp-wrap .mfp-content .mfp-figure > * > *  {
  background-color: var(--faded) !important;
  color: var(--text) !important;
  margin-top: .75rem !important;
}

.mfp-wrap .mfp-content .mfp-figure > * > img {
    background: none !important;
}

.mfp-bg {
  background-color: rgba(20,20,20,.65) !important;
  opacity: 1;
}

.mfp-wrap * {
    border-color: var(--border) !important;
    color: var(--text);
    font-size: var(--font-size) !important;
}

.mfp-figure *[type="button"] {
    font-size: 20pt !important;
}

.mfp-wrap h2 {
    border-color: var(--hr) !important;
}

.mfp-wrap .image-left-bar {
  background: none;
  border: none;
}

.mfp-wrap .mfp-content .mfp-figure {
  background: none;
}

.mfp-wrap .mfp-content {
  background-color: rgba(20,20,20,.0) !important;
  box-shadow: none;
}

#content {
    /* [!] structural element */
    /* the container containing all content */
}

.profile-header {
    /* character header */
}
    .profile-name-section {
        /* character name section */
    }
    
    .profile-info-section {
        /* character info section, aka the one with creator, tags, etc. */
    }

.profile-content-section {
    /* contents of profile, html you insert */
}

    .profile-content-title {
        /* "Profile" title */
    }
    
.profile-gallery-section {
    /* character gallery, featured */
}

    .profile-gallery-title {
        /* "Gallery" title */
    }
    
#content a {
    /* links in user-made content */
}

#content a:hover {
    /* links in user-made content when hovered on */
}





/*

    ELEMENTS
    ELEMENTS
    ELEMENTS
    ELEMENTS

*/





.img-thumbnail {
  background-color: var(--faded);
  border-color: var(--border) !important;
}





.page-link {
    border-color: var(--border) !important;
    background-color: var(--faded);
}

.page-link:hover {
    background-color: var(--color1);
    color: var(--light) !important;
}

.page-link:focus {
    background-color: var(--color2);
}

.disabled .page-link {
    border-color: var(--border) !important;
    background-color: var(--faded) !important;
    color: var(--muted) !important;
}





hr, .divider, .dropdown-divider {
    background: none !important;
    border: none !important;
    border-bottom: var(--border-width) solid var(--hr) !important;
    height: 0 !important;
}





.navbar .dropdown-menu {
  background-color: var(--topnav) !important;
  border-bottom: none !important;
}

.navbar .dropdown-menu .dropdown-header {
  color: var(--muted);
}





.nav-mobile-menu {
  background-color: var(--sidenav) !important;
  border: none !important;
}





/*

    ADJUSTMENTS
    ADJUSTMENTS
    ADJUSTMENTS
    ADJUSTMENTS

*/





/* this adjustment is here to make changing the sidebar width easier. otherwise the content might act super weird and shit... but with this you can just plop a max-width onto the sidebar without a worry... */

#content {
    width: 100% !important;
    flex: 1 !important;
}

#sidebar {
    flex: 1;
}





/* firefox and firefox-based browsers have this thing where, when you try to scroll up or down beyond the limits of the page, the browser will gently "stretch" the page. this is here just to make it look more seamless... It also helps with visualising the code in circlejourney's live editor, since it will kiiiind of look like the footer that's missing...! so there won't just be white empty space if the page isn't long enough */

body {
    background-color: var(--topnav);
}





/*

    WORLD EXCLUSIVE
    WORLD EXCLUSIVE
    WORLD EXCLUSIVE
    WORLD EXCLUSIVE

*/

.breadcrumb {
    background-color: var(--faded);f
}

.breadcrumb-item:before {
    color: var(--muted) !important;
}

.forum-category-wrapper .forum-category-forum {
    background: var(--faded);
    border: none;
    border-bottom: 1px solid var(--border) !important;
}

.forum-category-wrapper .forum-category-forum:last-child {
    border: none !important;
}

@media (max-width: 575.98px) {
    .forum-create-thread-wrapper .forum-create-thread, .pull-right {
        float: none !important;
        text-align: right;
    }
}

table {
  border-collapse: collapse;
  width: 100%;
  border: 2px solid #863e1b;
  border-radius:10px;
}

th, td {
  border: 1px solid #333;
  padding: 8px 12px;
  text-align: left;
}
th {
  background-color: var(--danger);
  color: #fff;
  text-align:center;
}

.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: var(--faded);
}

.forum-category-table-wrapper .forum-thread-row.sticky, .forum-view-table-wrapper .forum-thread-row.sticky {
  background-color: var(--color2);
}

.fr-view table th {
  background: var(--faded) !important;
}